<template>
  <Back only="only" title="预约核酸检测">
    <!-- 顶部按钮 -->
      <template #buttons>
          <el-button type="primary" size="small" plain>导入</el-button>
          <el-button type="primary" size="small" plain>导出</el-button>
      </template>
      <!-- 头部 -->
      <template #head>
        <div class="top">
          <div class="typebox">
            <input type="radio" name="type" checked @click="changeStateBack"/><span>全部</span>
            <input type="radio" name="type" @click="changeState" /><span>待检测</span>
            <input type="radio" name="type" @click="changeState"/><span>已完成</span>
            <input type="radio" name="type" @click="changeState"/><span>已退款</span>
          </div>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="changeTime"
            >
            </el-date-picker>
          </div>
          <div>
            <button class="searchbtn">搜索</button>
          </div>
        </div>
      </template>
      <!-- 表格 -->
      <template #table_body>
        <div class="msgbody">
          <el-table
            ref="multipleTable"
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55" fixed> </el-table-column>
            <el-table-column
              label="患者姓名"
              width="100"
              prop="sicknessName"
              align="center"
            >
            </el-table-column>
            <el-table-column
              style="font-size: 12px"
              label="就诊卡号"
              width="80"
              prop="jzNumber"
              align="center"
            ></el-table-column>
            <el-table-column
              label="身份证号"
              width="160"
              show-overflow-tooltip
              prop="idCard"
              align="center"
            ></el-table-column>
            <el-table-column
              label="手机号码"
              width="100"
              show-overflow-tooltip
              prop="phoneNumber"
              align="center"
            ></el-table-column>
            <el-table-column
              label="科室"
              width="90"
              show-overflow-tooltip
              align="center"
              prop="ghRoom"
            ></el-table-column>
            <el-table-column
              label="检测费"
              width="80"
              align="center"
              show-overflow-tooltip
              prop="ghMoney"
            ></el-table-column>
            <el-table-column
              label="状态"
              width="70"
              show-overflow-tooltip
              prop="ghState"
              align="center"
            ></el-table-column>
            <el-table-column
              label="就诊日期"
              width="100"
              align="center"
              show-overflow-tooltip
              prop="jzDate"
            ></el-table-column>
            <el-table-column
              label="候诊时间"
              width="180"
              show-overflow-tooltip
              prop="jzTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预约时间"
              width="150"
              align="center"
              fixed="right"
              show-overflow-tooltip
              prop="bookingTime"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="90"
              align="center"
              fixed="right"
              show-overflow-tooltip
              ><i class="el-icon-s-order" style="font-size: '32px'"></i
            ></el-table-column>
          </el-table>
        </div>
      </template>
       <!-- 分页 -->
       <template #page>
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </template>
    </Back>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
import { getUserMsgList, changeUserMsgList } from "@/api/Subscribe";
import Back from '@/components/Part/BackColor.vue'
Vue.use(Button);
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      tableData: [],
       currentPage: 1, // 当前页码
       total: 100, // 总条数
       pageSize: 10 // 每页的数据条数
    };
  },
  mounted() {
    getUserMsgList().then((res) => {
      this.tableData = res.list;
    });
  },
  methods: {
    handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
         this.currentPage = 1;
         this.pageSize = val;
     },
     //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
         this.currentPage = val;
    },
      changeState(val) {
      //更改待就诊、已就诊的状态的方法
      // console.log(3);
      // console.log(val.target.value);
      changeUserMsgList().then((res) => {
        //更改数据接口
        res.data.map((item) => {
          item.ghState = val.target.value;
          return item;
        });
        this.tableData = res.data;
      });
    },
    changeStateBack() {
      //点击全部把之前的数据重新渲染回去
      getUserMsgList().then((res) => {
        //渲染初始数据
        // console.log(res);
        this.tableData = res.list;
      });
    },
    changeTime(val) {
      //点击删选时间的数据
      console.log(val[0]);
      changeUserMsgList().then((res) => {
        res.data.map((item) => {
          item.jzDate = val[0];
          return item.jzDate;
        });
        this.tableData = res.data;
      });

    },
  },
  components: {
    Back,
    // Page
  }
};
</script>
<style >
#main {
  width: 1280px;
  height: 780px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  padding: 20px;
}
.typebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  padding-right: 60px;
}
.searchbtn {
  width: 64px;
  height: 32px;
  background-color: rgba(0, 110, 255, 1);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 16px;
}
.top {
  display: flex;
  align-items: center;
}
</style>
<style>
[only="only"] .el-table th.el-table__cell > .cell {
  color: #999;
  font-size: 12px;
  font-weight: lighter;
  text-align: center;
}
[only="only"] [class^="el-icon-"] {
  font-size: 24px;
  color: #006eff;
}
 [only="only"] .el-table td.el-table__cell div {
    text-align: center;
}
</style>